<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>用户列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="/static/bui/css/bs3/dpl.css" rel="stylesheet" type="text/css"/>
    <link href="/static/bui/css/bs3/bui.css" rel="stylesheet" type="text/css"/>

</head>

<body>
<div class="content" style="margin: 15px">

    <!-- 搜索页 ================================================== -->
    <div class="row">

        <form id="searchForm" class="form-horizontal" tabindex="0" style="outline: none;">
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">用户名：</label>

                    <div class="controls">
                        <input type="text" name="name" class="control-text">
                    </div>
                </div>
                <div class="control-group span8">
                    <label class="control-label">真名：</label>

                    <div class="controls">
                        <input type="text" name="realName" class="control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">状态：</label>

                    <div class="controls">
                        <select name="available">
                            <option value="-1">-请选择-</option>
                            <option value="0">停用</option>
                            <option value="1">可用</option>
                        </select>
                    </div>
                </div>
                <div class="form-actions span5">
                    <button id="btnSearch" type="submit" class="button button-primary">搜索</button>
                </div>
            </div>

        </form>

    </div>
    <div class="search-grid-container">
        <div id="grid">
        </div>

    </div>

    <div id="content" class="hide">
        <form id="J_Form" class="form-horizontal" action="../edit">
            <input type="hidden" name="id" value="0">

            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>用户名</label>

                    <div class="controls">
                        <input name="userName" type="text" data-rules="{required:true}"
                               class="input-normal control-text">
                    </div>
                </div>
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>真名：</label>

                    <div class="controls">
                        <input name="realName" type="text" data-rules="{required:true}"
                               class="input-normal control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>Email：</label>

                    <div class="controls">
                        <input name="email" type="text" data-rules="{required:true,email:true}"
                               class="input-normal control-text">
                    </div>
                </div>

            </div>

        </form>
    </div>

    <script type="text/javascript" src="/static/bui/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="/static/bui/js/bui.js"></script>
    <script type="text/javascript">

        BUI.use('common/search', function (Search) {
            var enumObj = {"1": "可用", "0": "停用"};
            var editing = new BUI.Grid.Plugins.DialogEditing({
                contentId: 'content', //设置隐藏的Dialog内容
                autoSave: true, //添加数据或者修改数据时，自动保存
                triggerCls: 'btn-edit'
            });
            var columns = [
                {title: 'ID', sortable: false, dataIndex: 'id'},
                {title: '用户名', sortable: true, dataIndex: 'userName'},
                {title: '邮箱', width: 200, sortable: true, dataIndex: 'email'},
                {title: '真名', sortable: true, dataIndex: 'realName'},
                {
                    title: '创建日期',
                    sortable: true,
                    dataIndex: 'created',
                    width: 150,
                    renderer: BUI.Grid.Format.datetimeRenderer
                },
                {
                    title: '最后登陆',
                    sortable: true,
                    dataIndex: 'lastLogin',
                    width: 150,
                    renderer: BUI.Grid.Format.datetimeRenderer
                },
                {
                    title: '注册渠道',
                    sortable: true,
                    dataIndex: 'channel',
                    width: 150
                },
                {
                    title: '状态',
                    width: 100,
                    sortable: true,
                    dataIndex: 'available',
                    renderer: BUI.Grid.Format.enumRenderer(enumObj)
                },
                {
                    title: '操作', width: 300, dataIndex: 'g', renderer: function (value, obj) {
                    var info = "启用";
                    if (obj.available == 1) {
                        info = "停用"
                    }
                    var editStr = '<span class="grid-command btn-status" title="修改状态">' + info + ' </span>';
                    var editStr1 = '<span class="grid-command btn-edit" title="编辑信息">编辑</span>';
                    var editStr2 = '<span class="grid-command btn-reset-password" title="重置密码">重置密码</span>';
                    var editStr3 = '<a class="grid-command" title="分配菜单" href="./role/' + obj.id + '">角色分配ß</a>';

                    return editStr + editStr1 + editStr2 + editStr3;

                }
                }
            ];

            var store = Search.createStore('/user/list.json', {
                        proxy: {
                            save: { //也可以是一个字符串，那么增删改，都会往那么路径提交数据，同时附加参数saveType
                                addUrl: '/user/edit.json',
                                updateUrl: '/user/edit.json',
                                removeUrl: '/user/delete.json'
                            }
                            ,
                            method: 'POST'
                        },
                        autoSync: true //保存数据后，自动更新
                    }),
                    gridCfg = Search.createGridCfg(columns, {
                        tbar: {
                            items: [
                                {
                                    text: '<i class="icon-plus"></i>新建',
                                    btnCls: 'button button-small',
                                    handler: addFunction
                                },
                                {
                                    text: '<i class="icon-remove"></i>删除',
                                    btnCls: 'button button-small',
                                    handler: delFunction
                                }
                            ]
                        },
                        plugins: [editing,  BUI.Grid.Plugins.CheckSelection, BUI.Grid.Plugins.AutoFit] // 插件形式引入多选表格
                    });


            var search = new Search({
                        store: store,
                        gridCfg: gridCfg
                    }),
                    grid = search.get('grid');


            function addFunction() {
                var newData = {isNew: true, id: 0}; //标志是新增加的记录
                editing.add(newData, 'name'); //添加记录后，直接编辑
            }


            //删除操作
            function delFunction() {
                var selections = grid.getSelection();
                delItems(selections);
            }

            function delItems(items) {
                var ids = [];
                BUI.each(items, function (item) {
                    ids.push(item.id);
                });

                if (ids.length) {
                    BUI.Message.Confirm('确认要删除选中的记录么？', function () {
                        $.ajax({
                            url: './delete.json',
                            dataType: 'json',
                            data: {ids: ids.toString()},
                            type: "POST",
                            success: function (data) {
                                if (data.code == 2000) {
                                    search.load()
                                } else {
                                    BUI.Message.Alert("删除失败")
                                }
                            }
                        })
                    }, 'question');
                }
            }

            //监听事件，删除一条记录
            grid.on('cellclick', function (ev) {
                var sender = $(ev.domTarget); //点击的Dom
                if (sender.hasClass('btn-del')) {
                    var record = ev.record;
                    delItems([record]);
                }
                if (sender.hasClass('btn-status')) {
                    var record = ev.record;
                    $.ajax({
                        url: './changeStatus/' + record.id + ".json",
                        dataType: 'json',
                        type: "POST",
                        success: function (data) {
                            if (data.code == 2000) {
                                search.load()
                            } else {
                                BUI.Message.Alert("修改失败")
                            }
                        }
                    })
                }

                if (sender.hasClass('btn-reset-password')) {
                    var record = ev.record;
                    $.ajax({
                        url: './resetPassword/' + record.id + ".json",
                        dataType: 'json',
                        type: "POST",
                        success: function (data) {
                            if (data.code == 2000) {
                                BUI.Message.Alert("重置成功")
                            } else {
                                BUI.Message.Alert("修改失败")
                            }
                        }
                    })
                }
            });
        });


    </script>
    <!-- script end -->
</div>
</body>
</html>
